<template>
	<view>
		<u-form label-width="160" ref="uForm" :model="form">
			<u-form-item label="头像">
				<u-avatar :src="src" size="120" @click="changeAvatar"></u-avatar>
			</u-form-item>
			<u-form-item label="昵称" prop="nickName">
				<u-input v-model="form.nickName"></u-input>
			</u-form-item>
			<u-form-item label="性别">
				<u-radio-group v-model="value" @change="radioGroupChange">
					<u-radio @change="radioChange" v-for="(item, index) in sexList" :key="index" :name="item.name"
						:disabled="item.disabled">
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="账号" prop="userName">
				<u-input v-model="form.userName"></u-input>
			</u-form-item>
			<u-form-item label="密码" prop="password">
				<u-input v-model="form.password"></u-input>
			</u-form-item>
			<u-form-item label="确认密码" prop="rePassword">
				<u-input v-model="form.rePassword"></u-input>
			</u-form-item>
			<u-form-item label="身份证号" prop="idCard">
				<u-input v-model="form.idCard"></u-input>
			</u-form-item>
			<u-form-item label="手机号" prop="phonenumber">
				<u-input v-model="form.phonenumber"></u-input>
			</u-form-item>
			<u-form-item label="邮箱" prop="email">
				<u-input v-model="form.email"></u-input>
			</u-form-item>
		</u-form>
		<button @click="submit">注册</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: 'http://124.93.196.45:10001/',
				src: '',
				sexList: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					}
				],
				value: '男',
				form: {
					userName: '',
					nickName: '',
					password: '',
					rePassword: '',
					idCard: '',
					phonenumber: '',
					email: ''
				},
				rules: {
					userName: [{
						required: true,
						message: '内容不能为空',
						trigger: ['blur', 'change']
					}],
					nickName: [{
						required: true,
						message: '内容不能为空',
						trigger: ['blur', 'change']
					}],
					password: [{
						required: true,
						message: '内容不能为空',
						trigger: ['blur', 'change']
					}],
					rePassword: [{
							required: true,
							message: '内容不能为空',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								if (value !== this.form.password) {
									callback(new Error('两次密码输入不一致'))
								} else {
									callback()
								}
							},
							trigger: ['blur', 'change']
						}
					],
					idCard: [
						{
						required: true,
						message: '内容不能为空',
						trigger: ['blur', 'change']
					}, 
					{
						min: 18,
						max: 18,
						message: '身份证格式错误',
						trigger: ['blur', 'change']
					}
					],
					phonenumber: [
						{
							required: true,
							message: '内容不能为空',
							trigger: ['blur', 'change']
						},
						{
							min: 11,
							max: 11,
							message: '请输入正确的手机号',
							trigger: ['blur', 'change']
						}
					],
					email: [
						{
							required: true,
							message: '内容不能为空',
							trigger: ['blur', 'change']
						}, 
						{
							min: 6,
							max: 20,
							message: '格式错误',
							trigger: ['blur', 'change']
						}
					]
				},
				sex: 0
			};
		},
		onLoad() {

		},
		methods: {
			changeAvatar() {
				uni.chooseImage({
					extension: true,
					success: (res) => {
						this.src = JSON.stringify(res.tempFilePaths)
						console.log(this.src)
					}
				})
			},
			radioChange(e) {
				if(e === '男'){
					this.sex = 0
				}else{
					this.sex = 1
				}
			},
			radioGroupChange(e) {
				if(e === '男'){
					this.sex = 0
				}else{
					this.sex = 1
				}
			},
		     submit(){
				this.$refs.uForm.validate(valid => {
					if(valid){
						this.register()
					}else{
						uni.showToast({
							title:'注册失败'
						})
					}
				})
			},
			async register(){
				const res = await uni.request({
					url: this.baseUrl + '/prod-api/api/register',
					method: 'POST',
					data:{
						avatar: this.src,
						sex: this.sex,
						...this.form
					},
					success: (res) => {
						if(res.data.code !== 200){
							uni.showToast({
								title:res.data.msg
							})
						}else{
							uni.showToast({
								title:'注册成功'
							})
							uni.navigateTo({
								url:'/pages/login/login'
							})
							console.log(res.data)
						}
					}
				})
				console.log(res)
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		}
	}
</script>

<style lang="scss">
	view {
		padding: 20rpx;
		button{
			width: 180rpx;
			height: 80rpx;
			background-color: #2979ff;
			color: white;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}
	}
</style>